<!--
 * @Author: your name
 * @Date: 2021-10-27 14:48:56
 * @LastEditTime: 2022-02-09 16:29:45
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edivv
 * @FilePath: \V9_Dev\src\views\basicModule\demo\EditTable\index.vue
-->
<template>
  <div>
    <jv-edit-table :tableObj="eTableObj">
      <Action
        :actions="actions"
        slot="btn-list"
        actionType="primary"
        size="mini"
      >
      </Action>
      <template #summary="{ row }">
        {{ getSummary(row, "summary") }}
      </template>
      <template #operation="{ row, row_index }">
        <table-action
          :actions="[
            {
              label: '插入',
              confirm: insert.bind(null, row_index)
            },
            {
              icon: 'el-icon-delete',
              confirm: delItem.bind(null, row_index)
            }
          ]"
          :dropDownActions="[
            {
              label: '提交',
              popConfirm: {
                title: '是否提交本条数据？',
                confirm: handleOpen.bind(null, row)
              }
            }
          ]"
        />
      </template>
    </jv-edit-table>
  </div>
</template>

<script>
const tableConfig = [
  {
    prop: "name",
    label: "名字",
    formCpn: "FormInput"
    // editConfig:{
    //   disabled:true,
    // }
  },
  {
    prop: "date",
    label: "日期",
    formCpn: "SingleTime",
    filter: "date",
    editConfig: {
      colInit: true
    }
  },
  {
    prop: "age",
    label: "年龄",
    formCpn: "FormInput",
    editConfig: {
      rules: {
        required: true
      },
      colInit: true
    }
  },
  {
    prop: "sex",
    label: "性别",
    formCpn: "FormSelect",
    options: {
      list: [
        {
          value: "男",
          label: "男"
        },
        {
          value: "女",
          label: "女"
        }
      ]
    }
  },
  {
    prop: "num",
    label: "数量",
    formCpn: "FormInput",
    type: "number",
    filter: "amount",
    align: "right",
    editConfig: {
      rules: {
        // 是否必填项
        required: true,
        // 提示信息
        message: "数量不能小于3",
        // 自定义校验 返回bool值
        validate: (val) => {
          return val > 1;
        }
      }
    },
    commonConfig: {
      summary: true,
      unit: "个"
    }
  },
  {
    prop: "unit",
    label: "单价",
    type: "number",
    formCpn: "FormInput",
    filter: "amount",
    align: "right",
    editConfig: {
      rules: {
        required: true,
        message: "提示"
      },
      colInit: true
    },
    commonConfig: {
      summary: true,
      unit: "元"
    }
  },
  {
    prop: "summary",
    label: "金额",
    align: "right",
    filter: "amount",
    custom: true,
    editConfig: {
      disabled: true
    },
    commonConfig: {
      summary: true,
      unit: "元"
    }
  },
  {
    prop: "remark",
    label: "自定义展示",
    formCpn: "FormSelect",
    options: {
      list: [
        {
          label: "托儿索",
          value: 1
        },
        {
          label: "儿童劫",
          value: 2
        },
        {
          label: "小鱼人",
          value: 3
        }
      ]
    },
    customFilter: (value, row) => {
      if (!value) return "";
      if (value == 1) {
        return "我是亚索";
      } else if (value == 2) {
        return `${row.name.value}的劫`;
      } else if (value == 3) {
        return "我是小鱼人";
      }
    }
  }
];
import { editTableData } from "../../../mock/editTableData";
export default {
  // 表格数据

  data() {
    return {
      eTableObj: {},
      dataItem: {
        name: "亚索",
        date: "2021-11-02",
        age: "15",
        sex: "男",
        customSex: "男",
        num: 10,
        unit: 100,
        summary: 0,
        remark: "面对疾风吧",
        list: [{ sex: "男" }, { sex: "女" }]
      },
      actions: [
        {
          label: "打印数据",
          confirm: this.printData
        },
        {
          label: "重置",
          confirm: this.reset
        },
        {
          // 校验
          label: "校验",
          confirm: this.validData
        }
      ]
    };
  },
  methods: {
    handleOpen(e) {
      // console.log(e);
      alert("提交成功了");
    },
    printData() {
      console.log(this.eTableObj.getTableData());
    },
    insert(index) {
      this.eTableObj.insert(index, [this.dataItem]);
    },
    reset() {
      // this.eTableObj.reset();
    },
    delItem(index) {
      this.eTableObj.delItem(index);
    },
    validData() {
      this.eTableObj.validate((valid) => {
        if (valid) {
          alert("ok");
        } else {
          // alert("fail");
        }
      });
    }
  },
  computed: {
    getSummary() {
      return (row, key) => {
        row[key].value = row.unit.value * row.num.value;
        // return amountFormat(row[key].value);
        return row[key].value;
      };
    }
  },
  created() {
    this.eTableObj = this.$JEditTable({
      tableSchema: tableConfig,
      data: editTableData,
      title: "编辑表格",
      showSummary: true
    });
  }
};
</script>

<style></style>
